<template>
  <div class="con5">
    <div id="col" :ChartsData="chartdata"></div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    chartdata: {
      gsmc: {
        type: Array,
        defaults: []
      },
      jhtz: {
        type: Array,
        defaults: []
      },
      sjtz: {
        type: Array,
        defaults: []
      }
    }
  },
  data() {
    //这里存放数据
    return {
      gongs1i: [],
      wanchengData1: [],
      jihuaData1: [],
      myChart: null
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    setChartBar() {
      let option = {
        title: {
          text: `${this.chartdata.年份}年总项目库1-${this.chartdata.月份}月完成情况`,
          x: '12%',
          textStyle: {
            fontWeight: 'bold',
            color: '#000',
            fontSize: 18
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          x: 'center',
          y: 'top',
          textStyle: {
            color: '#000',
            fontSize: 14
          },
          data: ['计划投资', '完成投资']
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '13%',
          top: '16.5%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: '#000'
              }
            },
            axisLabel: {
              show: true,
              color: '#000',
              textStyle: {
                fontSize: 18
              }
            },
            data: this.chartdata.gsmc //公司名称
          }
        ],
        yAxis: [
          {
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#000'
              }
            },
            axisLabel: {
              color: '#000',
              formatter: '{value}',
              textStyle: {
                fontSize: 18
              }
            },
            type: 'value'
          }
        ],
        series: [
          {
            name: '计划投资',
            type: 'bar',
            barWidth: '25%',
            data: this.chartdata.jhtz, //计划投资data
            itemStyle: {
              normal: {
                label: {
                  show: false, //开启显示
                  position: 'top', //在上方显示
                  textStyle: {
                    //数值样式
                    color: '#000',
                    fontSize: 16
                  }
                }
              }
            }
          },
          {
            name: '完成投资',
            type: 'bar',
            barWidth: '25%',
            data: this.chartdata.sjtz, //完成投资
            itemStyle: {
              normal: {
                label: {
                  show: false, //开启显示
                  position: 'top', //在上方显示
                  textStyle: {
                    //数值样式
                    color: '#000',
                    fontSize: 16
                  }
                }
              }
            }
          }
        ]
      };
      this.myChart.setOption(option);
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  created() {}, //生命周期 - 创建完成（可以访问当前this实例）
  beforeMount() {}, //生命周期 - 挂载之前

  mounted() {
    let dom = document.getElementById('col');
    this.myChart = this.$echarts.init(dom);

    let _this = this;
    window.addEventListener('resize', function () {
      _this.myChart.resize();
    });
    setTimeout(() => {
      this.setChartBar();
    }, 200);
  }, //生命周期 - 挂载完成（可以访问DOM元素）
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style scoped>
.con5 {
  background-color: #fff;
  margin-top: 20px;
  padding-top: 30px;
}
#col {
  height: 412px;
  margin: 0px auto;
}
</style>
